<!DOCTYPE html>
<html>
<head>
<title>Waveguide Diagram</title>
</head>
<body>

<canvas id="physicsCanvas" width="450" height="350"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Clear background
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // General settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    /**
     * Helper function to draw an arrowhead at a given point and angle.
     * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
     * @param {number} x - The x-coordinate of the arrow's tip.
     * @param {number} y - The y-coordinate of the arrow's tip.
     * @param {number} angle - The angle of the line in radians, pointing towards the tip.
     */
    function drawArrowhead(ctx, x, y, angle) {
        const headlen = 10; // length of one side of the arrow head
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-headlen, -headlen / 2.5);
        ctx.moveTo(0, 0);
        ctx.lineTo(-headlen, headlen / 2.5);
        ctx.stroke();
        ctx.restore();
    }

    // --- 1. Draw Conducting Planes ---
    const yTop = 100;
    const yBottom = 220;
    const xStart = 50;
    const xEnd = 400;
    const separation = yBottom - yTop;

    ctx.lineWidth = 3;

    // Top plane main line
    ctx.beginPath();
    ctx.moveTo(xStart, yTop);
    ctx.lineTo(xEnd, yTop);
    ctx.stroke();

    // Bottom plane main line
    ctx.beginPath();
    ctx.moveTo(xStart, yBottom);
    ctx.lineTo(xEnd, yBottom);
    ctx.stroke();

    // Hash marks for the conducting surfaces
    ctx.lineWidth = 1.5;
    const hashSpacing = 8;
    const hashLength = 8;
    const hashSlant = 5;

    // Top plane hash marks
    for (let x = xStart; x <= xEnd; x += hashSpacing) {
        ctx.beginPath();
        ctx.moveTo(x, yTop);
        ctx.lineTo(x - hashSlant, yTop + hashLength);
        ctx.stroke();
    }

    // Bottom plane hash marks
    for (let x = xStart; x <= xEnd; x += hashSpacing) {
        ctx.beginPath();
        ctx.moveTo(x, yBottom);
        ctx.lineTo(x - hashSlant, yBottom - hashLength);
        ctx.stroke();
    }

    // --- 2. Draw Distance Indicator 'a' ---
    const a_x = 75;
    ctx.lineWidth = 1.5;

    // Vertical line for the distance indicator
    ctx.beginPath();
    ctx.moveTo(a_x, yTop);
    ctx.lineTo(a_x, yBottom);
    ctx.stroke();

    // Arrowheads for the distance line
    drawArrowhead(ctx, a_x, yTop, -Math.PI / 2); // Pointing up
    drawArrowhead(ctx, a_x, yBottom, Math.PI / 2); // Pointing down

    // Label 'a'
    ctx.font = 'italic 22px serif';
    ctx.textAlign = 'start';
    ctx.fillText('a', a_x + 10, yTop + separation / 2);


    // --- 3. Draw Coordinate System ---
    const originX = 225;
    const originY = yTop + separation / 2; // Center between the planes
    const axisLength = 55;
    ctx.lineWidth = 2;

    // x-axis
    const x_end_x = originX + axisLength;
    const x_end_y = originY;
    ctx.beginPath();
    ctx.moveTo(originX, originY);
    ctx.lineTo(x_end_x, x_end_y);
    ctx.stroke();
    drawArrowhead(ctx, x_end_x, x_end_y, 0); // Angle is 0 for horizontal right
    ctx.font = 'bold 20px serif';
    ctx.fillText('x', x_end_x + 12, x_end_y + 3);

    // z-axis
    const z_end_x = originX;
    const z_end_y = originY - axisLength;
    ctx.beginPath();
    ctx.moveTo(originX, originY);
    ctx.lineTo(z_end_x, z_end_y);
    ctx.stroke();
    drawArrowhead(ctx, z_end_x, z_end_y, -Math.PI / 2); // Angle is -90 degrees for vertical up
    ctx.textAlign = 'center';
    ctx.fillText('z', z_end_x, z_end_y - 12);

    // y-axis
    const y_angle = -Math.PI / 4; // 45 degrees into the page
    const y_end_x = originX + axisLength * 0.9 * Math.cos(y_angle);
    const y_end_y = originY + axisLength * 0.9 * Math.sin(y_angle);
    ctx.beginPath();
    ctx.moveTo(originX, originY);
    ctx.lineTo(y_end_x, y_end_y);
    ctx.stroke();
    drawArrowhead(ctx, y_end_x, y_end_y, y_angle);
    ctx.fillText('y', y_end_x + 10, y_end_y - 10);

    // --- 4. Draw Caption ---
    ctx.font = 'bold 22px serif';
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 5.14', canvas.width / 2, yBottom + 60);

</script>

</body>
</html>